<template>
  <Dialogdrawerdefect
    :ddtvisible="visible"
    direction="rtl"
    size="750px"
    modal
    has-modal
    close-on-click-modal
    destroy-on-close
    @close="handleClose"
    :title="`${title}`">
    <div class="col-right cont_box mar-t-10" v-loading="loading">
      <AppInfoTitle>
        <b class="fs-18">纸质申请单图片预览</b>
      </AppInfoTitle>
      <div class="flex flex-row flex-wrap">
        <!-- v-if="imageList.lenth" -->
        <div v-for="(item, index) in imageList" :key="index" class="mar-r-10 pos-rel">
          <el-image
            slot="reference"
            style="width: 200px;"
            :src="item.pic"
            :preview-src-list="imageArray">
          </el-image>
          <!-- <el-image
            v-else
            slot="reference"
            style="width: 200px;"
            :src="imageFront + item.applyImageByte"
            :preview-src-list="imageArray">
          </el-image> -->
          <div class="delBtnStyle cursor-pointer flex flex-row align-center justify-center" @click="deleteImageBtn(item)">
            <div class="cursor-pointer">删除</div>
          </div>
        </div>
        <div v-if="imageArray.length <= 0">
          尚未上传申请单图片
        </div>
      </div>
      <div class="buttons">
        <div class="left-buttons">
          <el-button size="small" @click="handleClose">关 闭</el-button>
        </div>
      </div>
    </div>
  </Dialogdrawerdefect>
</template>
<script>
import Dialogdrawerdefect from '@/components/dialogbox/dialogDrawer'
import AppInfoTitle from '@/components/appInfoTitle/index'
import {
  fileDelete,
  applyimagedelete,
  applyimagegetlist,
  fileRead
} from '@/api/api.js'
import { isNull } from '@/utils/utils.js'
// import { getFileReadRIS } from '@/api/fileapi'
// import { getToken } from '@/utils/auth.js'
// import { sysAppId } from '@/settings'
let imageFront = 'data:image/png;base64,'
let imageFront2 = 'data:image/png;base64,' // png
export default {
  name: 'EditDialog',
  components: {
    Dialogdrawerdefect,
    AppInfoTitle
  },
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // imageList: {
    //   type: Array,
    //   default: () => []
    // },
    title: {
      type: String,
      default: '详情'
    }
  },
  data() {
    return {
      imageList: [],
      imageFront: imageFront,
      imageFront2: imageFront2,
      loading: false,
      isMpiOrPid: window.g.isMpiOrPid,
      imgBaseUrl: window.g.API_ROOT_RIS
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    },
    appConfig() {
      return this.$store.state.settings.appConfig
    },
    saveByPic() {
      return this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.saveByPic || false
    },
    imageArray() {
      let arr = []
      this.imageList.forEach(item => {
        arr.push(item.pic)
      })
      return arr
    }
  },
  created() {
    this.isMpiOrPid = this.appConfig && this.appConfig.baseConfig && this.appConfig.baseConfig.mpi || window.g.isMpiOrPid
  },
  beforeDestroy() {
    console.log('---applyImageDialog销毁----')
  },
  methods: {
    handleClose() {
      this.imageList = []
      console.log('我关闭啦')
      this.visible = false
    },
    flrStr(val) {
      return val === null ? '' : val
    },
    getPicByPath(filepath) {
      let params = {
        filepath
      }
      return new Promise(async resolve => {
        await fileRead(params).then(data => {
          console.log('fileRead=>data', data)
          // let list = []
          // list.push(data)
          // this.imageList = list
          // console.log('getApplyListByPicList=>this.imageList', this.imageList)
          this.loading = false
          resolve(data)
        })
      })
    },
    async dealPic(list) {
      // let isResultPic = false
      // 有几张图是对象存储的，做个统计
      let count = 0
      list.forEach(item => {
        if (item.imageFileName) {
          count++
        }
      })
      let count2 = 0
      list.map(item => {
        // 判断是那种类型的图片格式
        if (item.applyImageByte) {
          item.pic = this.imageFront + item.applyImageByte
        } else {
          if (item.imageFileName) {
            this.getPicByPath(item.imageFileName).then(res => {
              item.pic = res
              count2++
              // isResultPic = true
              if (count2 >= count) {
                this.imageList = list
                this.loading = false
                this.$forceUpdate()
                console.log('this.imageList', this.imageList)
              }
            })
          }
        }
      })
      console.log(isNull(1))
      // if (isNull(this.imageList) && !this.saveByPic) {
      //   this.imageList = list
      //   console.log('this.imageList', this.imageList)
      // }
      setTimeout(() => {
        this.imageList = list
        this.loading = false
        this.$forceUpdate()
        console.log('this.imageList', this.imageList)
      }, 2000)
    },
    getApplyImageList() {
      console.log('this.row', this.row)
      this.loading = true
      // 申请单预览
      let params = {
        HospitalCode: this.row.applyHospitalCode,
        ImageCategory: '申请单',
        AccessNo: this.flrStr(this.row.accessionNo)
      }
      applyimagegetlist(params).then(async res => {
        if (res.code == 10000) {
          let list = res.content.list
          console.log('applyimagegetlist_list', list)
          this.dealPic(list)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    deleteImageBtn(item) {
      this.$confirm('是否确定要删除该图片？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((e) => {
        console.log('eee', e)
        if (e == 'confirm') {
          this.deleteImageEvent(item)
        }
      }).catch(() => { })
    },
    deleteImageEvent(item) {
      let params = {
        HospitalCode: this.row.applyHospitalCode, // this.row.applyHospitalCode,
        Id: item.id
      }
      applyimagedelete(params).then(res => {
        if (res.code == 10000) {
          // this.$emit('deleteSuccess')
          this.getApplyImageList()
          this.$message.success(res.message)
          // console.log('item.imageFileName', item.imageFileName)
          // if (item.imageFileName) {
          //   this.fileDeleteEvent(item.imageFileName)
          // }
        } else {
          this.$message.error(res.message)
        }
      })
    },
    fileDeleteEvent(path) {
      console.log('fileDeleteEvent', path)
      let params = {
        HospitalCode: this.row.applyHospitalCode,
        Accessno: this.flrStr(this.row.accessionNo),
        FileName: path
      }
      fileDelete(params).then(res => {
        console.log('res', res)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.cont_box {
  height: calc(100vh - 98px);
  padding: 0 24px 45px;
  overflow-y: auto;
}
.delBtnStyle {
  background-color: rgba(0, 0, 0, 0.7);
  height: 32px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
  color: red;
  &:hover {
    background-color: rgba(255, 255, 255, 0.7);
  }
}
</style>
